<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>
		</title>
		<script src="{{__PUBLIC__}}/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="{{__PUBLIC__}}/bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="{{__PUBLIC__}}/bootstrap/css/bootstrap-theme.css"/>
		<link rel="stylesheet" type="text/css" href="{{__PUBLIC__}}/bootstrap/css/bootstrap.css"/>
		<script src="{{__PUBLIC__}}/bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="{{__VIEW__}}/Fan/fan.css"/>
		<link rel="stylesheet" type="text/css" href="{{__PUBLIC__}}/hdjs/hdjs.css"/>
		<script src="{{__VIEW__}}/Fan/fan.js" type="text/javascript" charset="utf-8"></script>
		<script src="{{__PUBLIC__}}/hdjs/hdjs.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<div class="page-header">
				<h1>
					<small>用户管理 </small>
				</h1>
				<h4>
					注册
				</h4>
			</div>
		</div>
		<div class="container">
			<div class="panel panel-default">
				<div class="panel-body">
					<div class="row">
						<div class="col-lg-6">
							<div class="input-group">
								<input type="text" class="form-control" placeholder="Search for...">
								<span class="input-group-btn">
									<button class="btn btn-default" type="button">
										<span class="glyphicon glyphicon-search">
										</span>
									</button>
								</span>
							</div><!-- /input-group -->
						</div><!-- /.col-lg-6 -->
						<div class="col-lg-6">
							<div class="input-group">
								<span class="input-group-btn">
									<button id="success"  type="button" class="btn btn-success">
										（+）新建分组
									</button>
								</span>
							</div><!-- /input-group -->
						</div><!-- /.col-lg-6 -->
					</div><!-- /.row -->
				</div>
			</div>
			<div id='left' class="panel panel-default">
				<div class="panel-heading" style="background: #fff;">
					<h3 class="panel-title" >
						全部用户
					</h3>
				</div>
				<div class="panel-heading change" style="background: #F4F5F9;">
					<div class="checkbox" style="display: inline-block;">
						<label>
							<input type="checkbox">
							全部
						</label>
					</div>
					<!-- Single button -->
					<div class="btn-group" style="display: inline-block;margin-left: 60px;">
						<button type="button" style="width: 130px; position: relative; text-align: left;text-indent: 10px;" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							添加到
							<span class="caret" style="position: absolute;right: 10px;top: 50%;">
							</span>
						</button>
						<ul class="dropdown-menu">
							<li>
								<a href="#">
									Action
								</a>
							</li>
							<li>
								<a href="#">
									Another action
								</a>
							</li>
						</ul>
					</div>
					<!-- Standard button -->
					<button type="button" class="btn btn-default" style="margin-left: 60px;padding: ;">
						加入黑名单
					</button>
				</div>
				<div class="panel-body">
					<ul class="list-group">
						{{foreach from="$data" key="$k" value="$v"}}
						<li class="list-group-item" style="position: relative;">
							<div class="checkbox" style="display: inline-block;">
								<label>
									<input type="checkbox">
								</label>
							</div>
							<a href="" class='showinfo' val='{{$v['id']}}' style="position:relative;padding:0 20px 0 10px;display: inline-block;">
								<img style="width: 48px;height: 48px;" src="{{$v['headimgurl']}}"/>
							</a>
							<a href="" style="display: inline-block;margin-left: 30px;">
								{{$v['nickname']}}
							</a>
							<!-- Standard button -->
							<button type="button" class="btn btn-default" style="float: right;margin: 8px 10px 20px;">
								修改备注
							</button>
							<!-- Single button -->
							<div class="btn-group" style="float: right; display: inline-block;margin: 8px 10px 0px;">
								<button type="button" style="width: 130px; position: relative; text-align: left;text-indent: 10px;" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
									默认组
									<span class="caret" style="position: absolute;right: 10px;top: 50%;">
									</span>
								</button>
								<ul class="dropdown-menu">
									<li>
										<a href="#">
											Action
										</a>
									</li>
									<li>
										<a href="#">
											Another action
										</a>
									</li>
								</ul>
							</div>
						</li>
						{{endforeach}}
						<li class="list-group-item" style="padding: 30px 0;">
						</li>
					</ul>
				</div>
				<nav style="width: 100%;display: block;">
				  <ul class="pagination" style="margin: 15px 300px;">
				    {{$page}}
				  </ul>
				</nav>
			</div>
			<div id='right' class="panel panel-default">
				<dl>
					<dt style="background:#F4F5F9;">
						全部用户
					</dt>
					<dd>
						默认组
					</dd>
					<dd>
						星标组
					</dd>
				</dl>
				<dl>
					<dt>
						黑名单
					</dt>
				</dl>
			</div>
		</div>
		<div id="" style="height: 200px;">
		</div>
	</body>
	<script type="text/javascript">
		var t = 35;
		$(function() {

		$('.showinfo').hover(function() {
			var show = this;
			$.post("{{U('getInfo')}}",{id:$(this).attr('val')},function(data){

				var info = '<div id="info">\
			<table class="table" style="border: none;">\
				<tr>\
					<td colspan="2">'+data.nickname+'</td>\
				</tr>\
				<tr>\
					<td>备注名</td>\
					<td>'+data.remark+'</td>\
				</tr>\
				<tr>\
					<td>地区	</td>\
					<td>'+data.country+'&nbsp;&nbsp;'+data.province+'&nbsp;&nbsp;'+data.city+'</td>\
				</tr>\
				<tr>\
					<td>签名</td>\
					<td>'+t+'</td>\
				</tr>\
				<tr>\
					<td>分组	</td>\
					<td>\
						<div class="btn-group" style="display: inline-block;margin-left: 0px;">\
							<button type="button" style="width: 130px; position: relative; text-align: left;text-indent: 10px;" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">添加到	<span class="caret" style="position: absolute;right: 10px;top: 50%;"></span>\
							</button>\
							<ul class="dropdown-menu">\
								<li>\
									<a href="#">Action</a>\
								</li>\
								<li>\
									<a href="#">Another action</a>\
								</li>\
							</ul>\
						</div>\
					</td>\
				</tr>\
				<tr>\
					<td></td>\
					<td>\
						<button type="button" class="btn btn-default" style="margin-left: 0px;padding: ;">加入黑名单</button>\
					</td>\
				</tr>\
			</table>\
		</div>';
		$(show).prepend(info);
			},'json')

		}, function() {
			$(this).find('#info').remove();
		});
	});
	</script>
</html>